<template>
	<view class="user column" catchtouchmove>
		<view class="header">
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<u-navbar customClass="user-navbar" :is-back="false" title="我的" :is-fixed="false" :border-bottom="false"
					:background="{ background: '#FFCC46' }" title-color="#0F0F0F">
				</u-navbar>
			</u-sticky>
			<view class="user-info row-between">
				<view class="info-wrap" @tap="goLogin">
					<view class="info row">
						<image class="avatar mr20 flexnone" :src="userInfo.avatar"></image>
						<view class="white userInfo-wrap row-between" v-if="isLogin">
							<view>
								<view class="name xxl line1 normal">{{userInfo.nickname || userInfo.username}}</view>
								<view class="name sm line1 muted">{{userInfo.mobile}}</view>
							</view>
							<u-icon name="arrow-right" class="arrow-right"></u-icon>
						</view>
						<view v-else>
							<view style="font-size: 42rpx">点击登录</view>
							<view class="sm">登录体验更多功能</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="order-nav bg-white">
			<view class="order-title row" @tap="goPage('/pages/user_order/user_order?type=1')">
				<text class="line"></text>
				<view class="row-between flex1">
					<text class="bold xxl line-title">我的订单</text>
					<u-icon name="arrow-right" class="arrow-right"></u-icon>
				</view>
			</view>
			<view class="nav row">
				<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?type=1')">
					<view class="icon-contain">
						<view v-if="userInfo.wait_pay" class="badge xs row-center bg-white">
							{{userInfo.wait_pay}}
						</view>
						<image class="nav-icon" src="/static/images/icon_my_payment.png"></image>
					</view>
					<view class="sm mt10">出餐中</view>
				</view>
				<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?type=2')">
					<view class="icon-contain">
						<view v-if="userInfo.wait_delivery" class="badge xs row-center bg-white">
							{{userInfo.wait_delivery}}
						</view>
						<image class="nav-icon mb10" src="/static/images/icon_my_fahuo.png"></image>
					</view>
					<view class="sm">配送中</view>
				</view>
				<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?type=3')">
					<view class="icon-contain">
						<view v-if="userInfo.wait_take" class="badge xs row-center bg-white">
							{{userInfo.wait_take}}
						</view>
						<image class="nav-icon" src="/static/images/icon_my_shouhuo.png"></image>
					</view>
					<view class="sm mt10">已送达</view>
				</view>
				<!-- @tap="goPage('/pages/bundle/goods_comment_list/goods_comment_list')" -->
				<!-- <view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?type=close')">
					<view class="icon-contain">
						<view v-if="userInfo.wait_comment" class="badge xs row-center bg-white">
							{{userInfo.wait_comment}}
						</view>
						<image class="nav-icon" src="/static/images/icon_my_pingjia.png"></image>
					</view>
					<view class="sm mt10">待评价</view>
				</view> -->
				<!--  @tap="goPage('/pages/bundle/post_sale/post_sale')" -->
				<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?type=5')">
					<view class="icon-contain">
						<view v-if="userInfo.after_sale" class="badge xs row-center bg-white">
							{{userInfo.after_sale}}
						</view>
						<image class="nav-icon" src="/static/images/icon_my_shouhou.png"></image>
					</view>
					<view class="sm mt10">已退款</view>
				</view>
			</view>
		</view>
		<view class="server-nav bg-white flex1">
			<view class="nav-item row-between" @tap="goPage('/pages/user_address/user_address')">
				<text>地址管理</text>
				<u-icon name="arrow-right" class="arrow-right"></u-icon>
			</view>
			<view class="nav-item row-between" @tap="goPage('/pages/user_coupon/user_coupon')">
				<text>优惠券管理</text>
				<u-icon name="arrow-right" class="arrow-right"></u-icon>
			</view>
			<view class="nav-item row-between" @tap="goPage('/pages/bundle/invitation/invitation')">
				<text>邀请管理</text>
				<u-icon name="arrow-right" class="arrow-right"></u-icon>
			</view>
			<view class="nav-item row-between" @tap="goPage('/pages/bundle/propose/propose')">
				<text>投诉建议</text>
				<u-icon name="arrow-right" class="arrow-right"></u-icon>
			</view>
			<!-- <view class="nav-item row-between">
				<text>团队管理</text>
				<u-icon name="arrow-right" class="arrow-right"></u-icon>
			</view> -->
			<view v-if="isAdmin" class="nav-item row-between" @tap="goPage('/pages/write_off/write_off')">
				<text>管理员入口</text>
				<u-icon name="arrow-right" class="arrow-right"></u-icon>
			</view>
		</view>
		<view class="xs muted" style="margin: 20rpx 0;">
			<view class="row-center" @click="callPhone">
				客服热线：{{phone}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getUser
	} from '@/api/user';
	import {
		getMenu
	} from '@/api/store'
	import {
		toLogin,
		wxMnpLogin
	} from '@/utils/login'
	import {
		menuJump,
		copy,
		setTabbar
	} from '@/utils/tools'
	import Cache from '@/utils/cache'
	const app = getApp()
	export default {
		data() {
			return {
				showNav: false,
				navH: 0,
				navBg: 0,
				menuList: [],
				statusBarH: "",
				phone: "",
				isAdmin: 0
			};
		},

		components: {},
		props: {},
		onLoad(options) {
			setTabbar()
			this.getMenuFun();
			const {
				phone
			} = Cache.get('_CONFIG')
			this.phone = phone
		},

		onShow() {
			this.getUser();
			this.getCartNum()
			const {
				isAdmin
			} = this.userInfo
			this.isAdmin = isAdmin
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},

		onUnload() {},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
			this.getMenuFun();
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				imageUrl: shareInfo.imageUrl,
				path: "pages/launch_page/launch_page?invite_code=" + this.inviteCode
			};
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/pages/bundle/user_profile/user_profile'
					});
					return;
				}
				toLogin()
			},

			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				});
			},
			tapMenu(item) {
				if (!this.isLogin) return toLogin()
				console.log(item)
				menuJump(item)
			},
			async getMenuFun() {
				const {
					data,
					code
				} = await getMenu({
					type: 2,
				})
				if (code == 1) {
					this.menuList = data
				}
			},

			onCopy(e) {
				copy(this.userInfo.sn)
			},

			callPhone() {
				uni.makePhoneCall({
					phoneNumber: "+86 " + this.phone,
					success(res) {
						//用户拒绝权限后任然会走这个函数，
						console.log("拨打电话成功", res)
					},
					fail(err) {
						console.log("拨打电话失败", 'err')
					}
				})
			}

		},
		computed: {
			...mapGetters(["cartNum", "userInfo", "inviteCode", "appConfig"]),
		}
	};
</script>
<style lang="scss">
	page {
		padding-bottom: 0;
	}

	.user {
		height: 100%;
		background-color: #fff;

		.header {
			display: flex;
			flex-direction: column;
			height: 320rpx;

			.user-navbar {
				.u-title {
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500 !important;
					color: #0F0F0F;
				}
			}

			.user-info {
				position: relative;

				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 0;
					width: 100%;
					height: 20rpx;
					background-color: #FFCC46;
				}

				&::after {
					background-color: #fff;
					border-radius: 40rpx 40rpx 0 0;
				}

				.info-wrap {
					padding: 30rpx;
					width: 100%;
				}

				.userInfo-wrap {
					flex: 1
				}

				.avatar {
					height: 110rpx;
					width: 110rpx;
					border-radius: 50%;
					overflow: hidden;
					background: rgba(0, 0, 0, .05);
				}

				.name {
					text-align: left;
					margin-bottom: 5rpx;
					max-width: 400rpx;
				}

				.user-id {
					border: 1px solid white;
					border-radius: 100rpx;

					.copy-btn {
						background-color: #FFDFDA;
						height: 40rpx;
						width: 90rpx;
						border-radius: 100rpx;
					}
				}

				.user-opt {
					position: relative;

					.dot {
						position: absolute;
						background-color: #ee0a24;
						border: 2rpx solid #FFFFFF;
						color: $-color-primary;
						border-radius: 100%;
						top: 6rpx;
						right: 0rpx;
						font-size: 22rpx;
						min-width: 16rpx;
						height: 16rpx;
					}
				}

				.buyer-type {
					background-color: #FFA200;
					height: 38rpx;
					padding: 0 10rpx;
				}
			}

			.member {
				flex: 1;
				padding: 0 20rpx;

			}

		}

		.order-nav {
			.order-title {
				padding-right: 15rpx;
				height: 100rpx;
				color: #FF8F00;

				.line {
					width: 8rpx;
					height: 28rpx;
					background-color: #FFCC46;
					margin: 0 22rpx;
					border-radius: 8rpx;

					&-title {
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FF8F00;
					}
				}
			}

			.icon-contain {
				position: relative;
			}
		}

		.order-nav,
		.my-assets {
			padding: 20rpx 20rpx 0;
			border-radius: 8rpx;
		}

		.server-nav {
			padding: 23rpx 50rpx 80rpx;
			border-radius: 8rpx;

			.nav-item {
				padding: 35rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;

				>text {
					color: #1e1e1e;
				}
			}

		}

		.title {
			height: 88rpx;
			padding: 0 30rpx;
			border-bottom: $-dashed-border;
		}

		.nav {
			padding: 26rpx 0;
			background-color: #F7F7F7;
			border-radius: 20rpx;

			.assets-item {
				flex: 1;
			}

			.item {
				width: 25%;
			}

			.badge {
				padding: 0 6rpx;
				min-width: 28rpx;
				height: 28rpx;
				border-radius: 28rpx;
				box-sizing: border-box;
				border: 1rpx solid $-color-primary;
				color: $-color-primary;
				position: absolute;
				left: 33rpx;
				top: -10rpx;
				z-index: 2;
			}

			.nav-icon {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.arrow-right {
			color: #ccc;
		}

		.muted {
			.row-center {
				color: #727272;
			}
		}
	}
</style>
